﻿<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <!-- Basic Page Needs
      ================================================== -->
    <meta charset="utf-8">
    <title>Shopholic</title>
    <!-- SEO Meta
      ================================================== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="distribution" content="global">
    <meta name="revisit-after" content="2 Days">
    <meta name="robots" content="ALL">
    <meta name="rating" content="8 YEARS">
    <meta name="Language" content="en-us">
    <meta name="GOOGLEBOT" content="NOARCHIVE">
    <!-- Mobile Specific Metas
      ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS
      ================================================== -->
    <link rel="stylesheet" type="text/css" href="css/custom.css?v=1.3">
    <link rel="stylesheet" type="text/css" href="css/responsive.css?v=1.3">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="se-pre-con"></div>
<div class="main">

    <script type="text/javascript" src="js/head.js"></script>

    <!-- Bread Crumb STRAT -->
    <div class="banner inner-banner1">
        <div class="container">
            <section class="banner-detail center-xs">
                <h1 class="banner-title">购物车</h1>
                <div class="bread-crumb right-side float-none-xs">
                    <ul>
                        <li><a href="index.html"><i class="fa fa-home"></i>主页</a>/</li>
                        <li><span>购物车</span></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <!-- Bread Crumb END -->

    <!-- CONTAIN START -->
    <section class="ptb-60">
        <div class="container" id="container">
            <div class="row">
                <div class="col-12">
                    <div class="cart-item-table commun-table">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>商品</th>
                                    <th>商品名</th>
                                    <th>价格</th>
                                    <th>数量</th>
                                    <th>小计</th>
                                    <th>删除</th>
                                </tr>
                                </thead>
                                <tbody id="proList">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div id="OtherInfo">
                <div class="mb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mt-30">
                                <a href="shop.html" class="btn btn-color">
                                    <span><i class="fa fa-angle-left"></i></span>
                                    继续选购
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mt-30 right-side float-none-xs">
                                <a class="btn btn-color" id="updateCart">更新购物车</a>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="mtb-30">
                    <div class="row">
                        <div class="col-md-6 mb-xs-40">
                            <div class="estimate">
                                <div class="heading-part mb-20">
                                    <h3 class="sub-heading">估计运费和税金</h3>
                                </div>
                                <form class="full">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="input-box select-dropdown mb-20">
                                                <fieldset>
                                                    <select id="country_id" class="option-drop">
                                                        <option selected="" value="">选择城市</option>
                                                        <option value="1">India</option>
                                                        <option value="2">China</option>
                                                        <option value="3">Pakistan</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-box select-dropdown mb-20">
                                                <fieldset>
                                                    <select id="state_id" class="option-drop">
                                                        <option selected="" value="1">选择省</option>
                                                        <option value="2">---</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-box select-dropdown mb-20">
                                                <fieldset>
                                                    <select id="city_id" class="option-drop">
                                                        <option selected="" value="1">选择市</option>
                                                        <option value="2">---</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="cart-total-table commun-table">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th colspan="2">购物车统计</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>商品价钱总计</td>
                                            <td>
                                                <div class="price-box">
                                                    $<span class="price" id="totalPrice"></span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>运费</td>
                                            <td>
                                                <div class="price-box">
                                                    $<span class="price" id="shipping">0.00</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>应付金额</b></td>
                                            <td>
                                                <div class="price-box">
                                                    <b>$<span class="price" id="finalPrice"></span></b>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="mt-30">
                    <div class="row">
                        <div class="col-12">
                            <div class="right-side float-none-xs">
                                <a id="checkOut" class="btn btn-color">结算
                                    <span><i class="fa fa-angle-right"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTAINER END -->

    <!--弹出提示框开始-->
    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">删除提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalBody">
                    确定要删除吗？
                </div>
                <div class="modal-footer">
                    <button id="confirm" class="btn btn-primary">确定</button>
                    <button class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--弹出提示框结束-->

    <!-- FOOTER START -->
    <script type="text/javascript" src="js/foot.js"></script>
    <!-- FOOTER END -->
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.downCount.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/common.js"></script>

<script>
    $(function () {
        /*请求购物车信息*/
        function getCartData() {
            $.ajax({
                url: "/ShowCartServlet",
                type: "POST",
                dataType: "JSON",
                success: function (data) {
                    $("#proList").empty();
                    $("#totalPrice").html(Number($("#priceBox").html()).toFixed(2));
                    $("#finalPrice").html(Number($("#totalPrice").html()).toFixed(2));
                    if (data.length > 0) {
                        $.each(data, function (index, item) {
                            var tr = "<tr>" +
                                "     <td>\n" +
                                "         <a href=\"product-page.html?goodsId="+item.goods.goodsId+"\">\n" +
                                "             <div class=\"product-image\">\n" +
                                "                 <img alt=\"Shopholic\" src=\"goodsimage/"+item.goods.image+"\">\n" +
                                "             </div>\n" +
                                "         </a>\n" +
                                "     </td>\n" +
                                "     <td>\n" +
                                "         <div class=\"product-title\"><input type='hidden' class='goodsIds' value='"+item.goods.goodsId+"' />\n" +
                                "             <a goodsId='"+item.goods.goodsId+"' class='goodsName' href=\"product-page.html?goodsId="+item.goods.goodsId+"\">" + item.goods.goodsName + "</a>\n" +
                                "         </div>\n" +
                                "     </td>\n" +
                                "     <td>\n" +
                                "         <ul>\n" +
                                "             <li>\n" +
                                "                 <div class=\"base-price price-box\">\n" +
                                "                     <span class=\"price\">" + Number(item.goods.price).toFixed(2) + "</span>\n" +
                                "                 </div>\n" +
                                "             </li>\n" +
                                "         </ul>\n" +
                                "     </td>\n" +
                                "     <td>\n" +
                                "        <div class=\"custom-qty\">\n" +
                                "            <button class=\"qtyMinus reduced items\" type=\"button\"><i\n" +
                                "                    class=\"fa fa-minus\"></i></button>\n" +
                                "            <input type=\"text\" class=\"input-text qty buyNums\" value='"+item.buyNum+"' maxlength=\"8\">\n" +
                                "            <button class=\"qtyPlus increase items\" type=\"button\"><i\n" +
                                "                    class=\"fa fa-plus\"></i></button>\n" +
                                "        </div>\n" +
                                "     </td>\n" +
                                "     <td>\n" +
                                "         <div class=\"total-price price-box\">\n" +
                                "             <span class=\"price totalPrices\">" + Number(item.goods.price * item.buyNum).toFixed(2) + "</span>\n" +
                                "         </div>\n" +
                                "     </td>\n" +
                                "     <td>\n" +
                                "         <i title=\"Remove Item From Cart\" data-id=\"100\"\n" +
                                "            class=\"fa fa-trash cart-remove-item\"></i>\n" +
                                "     </td>" +
                                "</tr>";
                            $("#proList").append(tr);
                        });
                    } else {
                        $("#proList").append("<tr><td colspan='6'>购物车还是空的快去添加商品吧</td></tr>")
                    }

                }
            })
        }

        getCartData();

        /*更新购物车按钮*/
        $("#updateCart").click(function () {
            getCartData();
        });

        /*商品移除购物车*/
        $("#container").on("click",".cart-remove-item", function () {
            var $goodsName = $($(".goodsName").get($(this).parents("tr").index()));
            $("#tipModal").modal("show");
            console.log("a");
            $("#confirm").click(function () {
                console.log($goodsName.attr("goodsid"));
                $.ajax({
                    url: "/UpdateCartServlet",
                    type: "POST",
                    data: {
                        "goodsId": $goodsName.attr("goodsid"),
                        "buyNum" : "0"
                    },
                    dataType: "json",
                    success: function () {
                        $("#tipModal").modal("hide");
                        //成功之后更新购物车信息
                        getCartData();
                    }
                });
            });
        });

        /*
        /!*数量减少*!/
        $("#container").on("click",".qtyMinus",function () {
            var qty = $(this).val();
            if( !isNaN( qty ) && qty > 1 ){
                $(this).val(qty - 1);
                console.log(qty);
            }else{
                return false;
            }
        });

        /!*数量增加*!/
        $("#container").on("click",".qtyPlus",function () {
            console.log("++");
            var qty = $(".qty").val();
            if( !isNaN( qty )) qty.value++;return false;
        })*/
        $("#checkOut").on("click", function () {
            var goodsIds = new Array();
            var totalPrices = new Array();
            var buyNums = new Array();
            console.log($(".goodsIds").size());
            for (var i = 0; i < $(".goodsIds").size(); i++) {
                goodsIds[i] = $(".goodsIds").eq(i).val();
                totalPrices[i] = $(".totalPrices").eq(i).html();
                buyNums[i] = $(".buyNums").eq(i).val();
                console.log(goodsIds[i]);
                console.log(totalPrices[i]);

            }
            /*console.log(goodsIds);
            console.log(totalPrices);
            console.log(buyNums);*/
            addOrderServlet(goodsIds, totalPrices, buyNums)

            function addOrderServlet(goodsIds, totalPrices, buyNums) {
                console.log(totalPrices);
                $.ajax({
                    url: "addOrderServlet",
                    type: "post",
                    traditional: true,
                    data: {
                        "goodsIds": goodsIds,
                        "totalPrices": totalPrices,
                        "buyNums": buyNums
                    },
                    success: function (data) {

                    }
                })
            }
        })
    });

</script>
</body>
</html>
